/*
 * 面向属性的 CSS
 */

 /* 版心盒子 */
 .wrapper{
     width: 360px;
     margin: 0 auto;
 }
/* 布局方式 */
.dpflex { display: flex; }
.dpnone { display: none; }
.flex1 { flex: 1 }
.fdcolumn{ flex-direction: column;}

/* 盒模型 */
.mt0 { margin-top: 0; }
.mt8 { margin-top: 8px; }
.mt10{ margin-top: 10px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }

.mr16 { margin-right: 16px; } 
.mb16 { margin-bottom: 16px; }
.ml12 { margin-left: 12px; }
.ml16 { margin-left: 16px; } 


.pd16 { padding: 16px; }

/* 字号 */
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f28 { font-size: 28px; }
.f34 { font-size: 34px; }
.f80 { font-size: 80px; }


/* 加粗 */
.fb{font-weight: bold;}

/* 颜色 */
.c004{color: #004E73;}
.cf{color: #fff;}
.c005{color: #005177;}
.c203{color: #c2c0c3;}
.cred{color: red;}


/* 不平铺 */
.bgr{background-repeat: no-repeat;}

/* 测试边框 */
.bor{border: 1px solid;}

/* 定位 */
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed;}

/* 弧度 */
.brad{border-radius: 15px;}

/* 居中 */
.tac{text-align: center;}

/* 首行缩进 */
.ti20{text-indent: 20px;}
.ti10{text-indent: 10px;}